<template>
    <div class="collect">
        <h2>我的收藏</h2>
        <div v-for="(item, index) in item" :key="index" class="tablist">
            <img :src="item.image" alt="">
            <div>
                <p>{{ item.title }}</p>
                <p class="type">
                    {{ item.channel_name }}
                    {{ item.date_str }}
                </p>
            </div>
        </div>
    <div>
        收藏页

    </div>
    </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/coun';
import { ref } from 'vue'

const item = ref([])

const counterStore = useCounterStore()
console.log(counterStore.arr);

item.value = counterStore.arr

</script>

<style lang="scss" scoped>
.collect{
    padding: 10px;
}
.tablist {
    background: white;
    display: flex;

    img {
        width: 6.25rem;
        height: 5rem;
        margin: 0.625rem;
        flex-shrink: 0;
    }

    div {
        margin: 12px 8px;
        position: relative;

        .type {
            position: absolute;
            color: #999;
            font-size: 14px;
            bottom: 3px;
        }
    }
}



</style>